<!DOCTYPE html>
<html class="no-js" lang="en">
    <head>

        <meta charset='UTF-8'>

        <title>Sticky: Seriously simple notifications for jQuery</title>
        <!-- CSS -->
        <link href="demo.css" rel="stylesheet" type="text/css" />
        <link href="sticky.css" rel="stylesheet" type="text/css" />

        <!-- JavaScript -->
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="sticky.min.js" type="text/javascript"></script>

    </head>
<body>
    <div>
        <h2>Sticky: Seriously simple notifications for jQuery</h2>

        <a href="https://github.com/commadelimited/Sticky" class="download" style="float: right;">Download from Github</a>

        <p>Sticky is just a little guy. About 3.1k in total for the full and only 1.4k for the minified version.</p>

        <p>Here's some basic examples of implementing notifications with Sticky. By default, a Sticky opens in the top right corner of the window. You'll also notice that duplicates are allowed, although you can disable duplicate messages within the settings.</p>

        <hr />

        <p>Plain note, all default options</p>
        <p class="tryit" id="plaintext">$.sticky('I am a plain text note. Nothing special about me.');</p>

        <p>Plain note, default options, html content</p>
        <p class="tryit" id="withhtml">$.sticky('<b>Greetings</b>. I am an HTML note.');</p>

        <p>Plain note, default options, custom callback function</p>
        <p class="tryit" id="callback">$.sticky('I am a plain text note. I'll tell you good job!.', callback);</p>

        <p>Overriding classList and speed</p>
        <p class="tryit" id="success">$.sticky('Upload complete', {classList: 'success', speed: 'slow'});</p>

        <p>Opening a note top, center</p>
        <p class="tryit" id="top-center">$.sticky('Clever message', {position: 'top-center'});</p>

        <p>Opening a note bottom, center</p>
        <p class="tryit" id="bottom-center">$.sticky('Clever message', {position: 'bottom-center'});</p>

        <p>Overriding classList with warning class.</p>
        <p class="tryit" id="warning">$.sticky('Careful, there be dragons ahead', {classList: 'warning'});</p>

        <p>Overriding classList, making note stay open.</p>
        <p class="tryit" id="important">$.sticky('I give up, it just won't work.', {classList: 'important', autoclose: 0});</p>

        <p>Overriding classList, allowing no duplicates.</p>
        <p class="tryit" id="info">$.sticky('I just wanted you to know', {classList: 'info', allowdupes: false});</p>

        <p><b>Returned: <span id="results" style="color:#eb5847;"></span></b></p>

        <p>As you can see above, a bit of JSON will be returned with some potentially pertinent information.</p>

        <style type="text/css">
            .success { background: #468847; color: #ffffff; }
            .warning { background: #f89406; color: #ffffff; }
            .important { background: #b94a48; color: #ffffff; }
            .info { background: #3a87ad; color: #ffffff; }
        </style>

        <script>
            $(function(){
                var defaults = {
                    position: 'top-right', // top-left, top-right, bottom-left, or bottom-right
                    speed: 'fast', // animations: fast, slow, or integer
                    allowdupes: true, // true or false
                    autoclose: 5000,  // delay in milliseconds. Set to 0 to remain open.
                    classList: '' // arbitrary list of classes. Suggestions: success, warning, important, or info. Defaults to ''.
                };

                function callback(r) {
                    $('#results').html(JSON.stringify(r));
                }

                $('#plaintext').click(function(){
                    $.sticky('I am a plain text note. Nothing special about me.', defaults, callback);
                });
                $('#withhtml').click(function(){
                    $.sticky('<b>Greetings</b>. I am an HTML note.')
                });
                $('#callback').click(function(){
                    $.sticky('I am a plain text note. I\'ll tell you good job!', function(){
                        alert("You did it! Great job!");
                    });
                });
                $('#success').click(function(){
                    $.sticky('Upload complete', $.extend({}, defaults, {classList: 'success', speed: 'slow'}), callback)
                });
                $('#top-center').click(function(){
                    $.sticky('Look at me ma! I\'m right in the center!', $.extend({}, defaults, {position: 'top-center'}))
                });
                $('#bottom-center').click(function(){
                    $.sticky('All the way at the bottom, but I\'m still in the center!', $.extend({}, defaults, {position: 'bottom-center'}))
                });
                $('#warning').click(function(){
                    $.sticky('Careful, there be dragons ahead', $.extend({}, defaults, {classList: 'warning'}), callback)
                });
                $('#important').click(function(){
                    $.sticky('I give up, it just won\'t work.', $.extend({}, defaults, {classList: 'important', autoclose: 0}), callback);
                });
                $('#info').click(function(){
                    $.sticky('I just wanted you to know', $.extend({}, defaults, {classList: 'info', allowdupes: false}), callback);
                });

            });
            function stickytester(note, options) {
                var o = $.extend({
                    'position': 'bottom-right', // top-left, top-right, bottom-left, or bottom-right
                    'speed' : 'fast', // animations: fast, slow, or integer
                    'allowdupes' : false, // true or false
                    'autoclose' : 0 // delay in milliseconds. Set to 0 to remain open.
                }, options);
                $.sticky(note, o, function(r) {
                    $('#results').html(JSON.stringify(r));
                });
            }
        </script>

    </div>
</body>
</html>
